<!--
    * Time    : 2021-03-19 18:01:42
    * Author  : yinjing
    * Desc    : 内容中心
-->

<template>
    <div class="search bg-f8 pb-2">
        <header class="position-relative zindex-1">
            <div class="header-box">
                <div class="header-search" style="margin: 7px 10px">
                    <input class="ser-input" type="text" v-model="searchText" @keyup.enter="enterSearch" placeholder="请输入关键词搜索" />
                    <span class="icon iconfont iconsearch"></span>
                </div>
            </div>
        </header>
        <!-- tabs -->
        <van-tabs
            v-if="settingInfo.articleNavigationBOs && settingInfo.articleNavigationBOs.length > 0"
            swipe-threshold="3"
            class="mt-0"
            :class="{ sticky: settingInfo.navigationCeiling == 'CEILING' }"
            line-height="4"
            :title-active-color="themes.color"
            :color="themes.color"
            :ellipsis="false"
            v-model="activeTab"
            @change="changeTab"
        >
            <van-tab v-for="(item, index) in settingInfo.articleNavigationBOs" :name="item.id" :key="index" :title="item.navigationName" />
        </van-tabs>
        <div class="questionBox" v-if="activeName == '常见问题'">
            <div
                v-for="(item, index) in questionList"
                :key="index"
                :class="currentIndex == index ? 'active' : ''"
                :style="{ background: currentIndex == index ? bg01 : '' }"
                @click="changeQuest(index, item.id)"
            >
                {{ item.navigationName }}
            </div>
        </div>
        <van-list v-if="paging.tab" v-model="paging.loading" ref="list" :finished="paging.finished" :immediate-check="false" @load="loadmore">
            <template v-if="activeName !== '常见问题'">
                <!-- 魔方 -->
                <template v-if="settingInfo && settingInfo.pageStyle == 'RUBIK_CUBE'">
                    <waterfall :col="2" :width="itemWidth" :gutterWidth="gutterWidth" :data="list" isTransition class="px-1">
                        <div class="box border-white d-flex flex-wrap" v-for="(item, index) in list" :key="index" @click="goArticle(item.id)">
                            <div class="overflow-h position-relative w-100" style="border-radius: 5px 5px 0px 0px">
                                <legend-image :pic="item.mainPhotoPath" class="w-100 h-100" />
                                <img
                                    v-if="item.contentType == 'VEDIO'"
                                    src="@/assets/images/bofang.png"
                                    alt=""
                                    class="position-absolute center-xy"
                                    style="width: 47px; height: 47px"
                                />
                            </div>
                            <div class="bg-white p-1 w-100" style="border-radius: 0 0 5px 5px">
                                <div class="font-14 line-clamp2">{{ item.title }}</div>
                                <div class="font text-999 mt-1" v-if="settingInfo.pageShows.includes(2)">
                                    {{
                                        item.glanceCounts > 10000
                                            ? (item.glanceCounts - (item.glanceCounts % 1000)) / 10000 + 'W'
                                            : item.glanceCounts
                                    }}人阅读
                                </div>
                            </div>
                        </div>
                    </waterfall>
                </template>
                <!-- 列表 -->
                <template v-if="settingInfo && settingInfo.pageStyle == 'LIST'">
                    <div class="px-1 bg-white">
                        <div v-for="(item, index) in list" :key="index" @click="goArticle(item.id)">
                            <div class="my-1 d-flex j-sb border-bottom py-1">
                                <div style="width: 70%">
                                    <div class="line-clamp2 font-14">{{ item.title }}</div>
                                    <div class="tagBox" v-if="settingInfo.pageShows.includes(3)">
                                        <div v-for="(label, i) in item.labels" :key="i">{{ label.labelName }}</div>
                                    </div>
                                    <div class="text-999 font mt" v-if="settingInfo.pageShows.includes(5)">
                                        {{ item.createTime | dateformat('YYYY-MM-DD') }}
                                    </div>
                                </div>
                                <div class="overflow-h rounded-5 ml-1" style="width: 90px; height: 60px">
                                    <legend-image :pic="item.mainPhotoPath" class="object-cover w-100 h-100" />
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </template>

            <template v-if="activeName == '常见问题'">
                <div class="bg-white px-1 mt-1">
                    <div class="d-flex j-sb a-center py-15p border-bottom" v-for="(item, index) in list" :key="index" @click="goArticle(item.id)">
                        <div class="text-333 font-14">{{ item.title }}</div>
                        <div class="text-999 font" v-if="settingInfo.pageShows.includes(2)">{{ item.glanceCounts }}人阅读</div>
                    </div>
                </div>
            </template>
        </van-list>
        <Noempty v-if="paging.emptylist || paging.error" :pic="require('@/assets/images/order-empty.png')" :title="'暂无列表信息'" />

        <!-- 回到顶部 -->
        <div class="backTopBox" v-if="showBackTop" @click="backTop">
            <span class="icon iconfont iconzhiding center-xy text-000" style="top: 50%; left: 50%" />
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { colorRgb } from '@/utils/utils'
import Noempty from '@/components/Noempty/Noempty'
import legendImage from '@/components/legendImage/legendImage'
import { contentCenterApi } from '@/api/contentCener'
import PageUtil from '@/utils/PageUtil'
const pageUtil = new PageUtil(contentCenterApi.getArticleList)

export default {
    name: '',
    components: { Noempty, legendImage },
    data() {
        return {
            settingInfo: {
                articleNavigationBOs: []
            }, //配置信息
            searchText: '',
            list: [],
            questionList: [],
            currentIndex: 0,
            activeTab: 0,
            activeName: '',
            showBackTop: false, //显示回到顶部
            paging: {
                tab: true,
                loading: false,
                finished: false,
                error: false, // 是否错误
                emptylist: false // 是否显示列表为空时的样式
            },
            childId: 0, //子模块ID
			pageShows: ''
        }
    },
    computed: {
        itemWidth() {
            return document.documentElement.clientWidth / 2 - 13 // #rem布局 计算宽度
        },
        gutterWidth() {
            return 5
            // return (9*0.5*(document.documentElement.clientWidth / 375)) // #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
        },
        ...mapState(['themes']),
        bg01() {
            return `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${colorRgb(this.themes.color).b}, 0.1) !important`
        }
    },
    watch: {},
    created() {
        window.addEventListener('scroll', this.onPageScroll)
        this.getSetting()
    },
    destroyed() {},
    mounted() {},
    methods: {
        // 获取配置
        getSetting() {
            contentCenterApi.getSetting().then((res) => {
                if (res.success) {
                    document.title = res.result.pageName
                    let questionIndex = res.result.articleNavigationBOs.findIndex((item) => item.mayModification == false) //常见问题数组下标
                    if (questionIndex != -1) {
                        this.handleData(res.result.articleNavigationBOs, questionIndex)
                    }

                    this.settingInfo = res.result
                    this.activeName = res.result.articleNavigationBOs[0].navigationName
					this.pageShows = res.result.pageShows
                    // sessionStorage.setItem('pageShows', res.result.pageShows)
                    pageUtil.loadListByPage(this, { id: res.result.articleNavigationBOs[0].id })
                }
            })
        },
        // 处理数据
        handleData(navList, questionIndex) {
            // 给 常见问题添加一个全部选项
            this.questionList = navList[questionIndex].items
            if (!this.questionList || this.questionList == null) {
                this.questionList = []
            }
            this.questionList.unshift({
                id: navList[questionIndex].id,
                navigationName: '全部'
            })

            // 如果常见问题不在第三个
            if ((questionIndex !== 2) & (navList.length > 1)) {
                if (questionIndex == 1) {
                    if (navList.length >= 3) {
                        this.swapArray(navList, questionIndex, 2)
                    }
                }
                if (questionIndex === 0) {
                    if (navList.length == 2) {
                        this.swapArray(navList, questionIndex, 1)
                    }
                    if (navList.length >= 3) {
                        this.swapArray(navList, questionIndex, 2)
                    }
                }
            }
            return navList
        },
        // 交换两个数组下标位置
        swapArray(arr, oldIndex, newIndex) {
            arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0]


            return arr
        },
        // 返回顶部
        backTop() {
            let scrollTop = document.documentElement.scrollTop || window.pageYOffset
            let timer = setInterval(() => {
                scrollTop -= 80
                window.scrollTo(0, scrollTop)
                if (scrollTop <= 0) {
                    clearInterval(timer)
                }
            }, 20)
        },
        // 滚动事件
        onPageScroll(e) {
            // 安卓微信内置浏览器不支持document.documentElement.scrollTop 所以用window.pageYOffset
            let scrollTop = document.documentElement.scrollTop || window.pageYOffset
            if (scrollTop >= 100) {
                this.showBackTop = true
            } else {
                this.showBackTop = false
            }
        },
        loadmore(e) {
            pageUtil.loadListByPageMore()
        },
        // 改变常见问题index
        changeQuest(index, id) {
			if(this.currentIndex === index) {
				return false
			}
            this.currentIndex = index
            this.childId = id
            pageUtil.loadListByPage(this, { id })
            if (!this.paging.finished) {
                this.paging.finished = false
            }
        },
        // 切换tab
        changeTab(name, title) {
            this.activeName = title
            this.childId = 0
            pageUtil.loadListByPage(this, { id: name })
            if (!this.paging.finished) {
                this.paging.finished = true
            }
            if (!this.paging.finished) {
                this.paging.loading = false
            }
        },
        goArticle(id) {
            this.$router.push({
                name: 'article',
                query: {
                    id
                }
            })
        },
        // 搜索
        enterSearch() {
            let params = {
                keyWord: this.searchText,
                id: this.activeTab
            }
            if (this.childId) {
                params.id = this.childId
            }
            pageUtil.loadListByPage(this, params)
        }
    }
}
</script>

<style scoped>
body {
    background: #f8f8f8;
}
.sticky {
    position: sticky !important;
    top: 0px !important;
    z-index: 100 !important;
}
.search {
    min-height: 100% !important;
    background: #fff;
}
.search .icon {
    position: absolute;
    color: #999;
    left: 10px;
    top: 7px;
    display: block;
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}
.box {
    height: 100%;
    overflow: auto;
    margin-top: 10px;
}
.questionBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 10px 0;
    background: #fff;
    margin-top: 10px;
    padding: 10px;
}
.questionBox div {
    width: 30%;
    height: 30px;
    background: #f5f5f5;
    border-radius: 15px;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    margin: 5px;
}
.active {
    border: 1px solid var(--themescolor);
    color: var(--themescolor);
    padding: 0 !important;
}
.tagBox {
    height: 18px;
    padding: 1px;
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    -webkit-text-size-adjust: none;
    margin-top: 5px;
    overflow: hidden;
}
.tagBox div {
    margin-right: 5px;
    width: 56px;
    height: 18px;
    background: #f5f5f5;
    border-radius: 2px;
    color: #333;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
}
/* 置顶 */
.backTopBox {
    position: fixed;
    border-radius: 100%;
    background: #fff;
    border: 1px solid #ccc;
    width: 35px;
    height: 35px;
    right: 15px;
    bottom: 63px;
}
</style>
